<template>
    <div class="hot">
        <p class="hot-title">热门城市</p>
        <ul class="hot-list">
            <li class="hot-item " v-for="item in hotList" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props:["hotList"],
        data () {
            return {
            
            }
        }
    }   
</script>

<style lang="stylus" scoped>
    .hot{
        font-size .28rem
        color #212121
    }
        .hot .hot-title{
            font-size .24rem
            line-height  .7rem
            padding-left .32rem
            
        }
        .hot-list{
            position relative
            background-color #fff
            overflow hidden
            
        }
        
        .hot-list .hot-item{
            float left
            width 33.33%
            line-height .8rem
            text-align center
            border-bottom 1px solid #ddd
        }
        .hot-list:before{
            position absolute
            content ''
            width 33.33%
            height 100%
            left 33.33%
            top 0
            border-left 1px solid #ddd
            border-right 1px solid #ddd
        }
       

</style>